<template>
  <div class="custom-table" v-loading="loading" style="min-height: 4rem;">
    <list-item
      v-for="member in members"
      :key="member.id"
      :member="member"
      :editing="editing"
      @reload="loadMembers"
    />
    <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount" />
  </div>
</template>

<script>
import ListItem from './member-list-item';
import { formatMembers } from '../../../format';

export default {
  name: 'member-list',
  props: {
    editing: {
      type: Boolean,
      default: false,
    },
  },
  components: { ListItem },
  data() {
    return {
      members: [],
      loading: false,
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    loadMembersParams() {
      return {
        groupId: this.$route.params.groupId,
        page: this.$route.query.page || 1,
      };
    },
  },
  created() { this.loadMembers(); },
  methods: {
    // 加载成员数据
    loadMembers() {
      this.loading = true;
      this.$api.groupMembers.index(this.loadMembersParams)
        .then((res) => {
          this.members = formatMembers(res.data);
          this.pagination.currentPage = res.kaminari.current_page;
          this.pagination.pageCount = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    loadMembersParams() { this.loadMembers(); },
  },
};
</script>

<style></style>
